<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
    <% Ajax.RenderResources<CollapsiblePanelExtender>(); %>
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    CollapsiblePanel Demonstration
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <% Html.BeginForm(); %>
    <div class="demoarea">
        <div class="demoheading">
            CollapsiblePanel Demonstration</div>
        <div id="Panel2" class="collapsePanelHeader">
            <div style="padding: 5px; cursor: pointer; vertical-align: middle;">
                <div style="float: left;">
                    What is ASP.NET AJAX?</div>
                <div style="float: left; margin-left: 20px;">
                    <span id="Label1">(Show Details...)</span>
                </div>
                <div style="float: right; vertical-align: middle;">
                    <img alt="(Show Details...)" src="/Content/Images/expand_blue.jpg" id="Image1" />
                </div>
            </div>
        </div>
        <div id="Panel1" class="collapsePanel" style="height: 0px">
            <br />
            <p>
                <input type="image" src="/Content/Images/AJAX.gif" alt="ASP.NET AJAX" align="right"
                    style="border-width: 0px;" />
                ASP.NET AJAX is a free framework for building a new generation of richer, more interactive,
                highly personalized cross-browser web applications. This new web development technology
                from Microsoft integrates cross-browser client script libraries with the ASP.NET
                2.0 server-based development framework. In addition, ASP.NET AJAX offers you the
                same type of development platform for client-based web pages that ASP.NET offers
                for server-based pages. And because ASP.NET AJAX is an extension of ASP.NET, it
                is fully integrated with server-based services. ASP.NET AJAX makes it possible to
                easily take advantage of AJAX techniques on the web and enables you to create ASP.NET
                pages with a rich, responsive UI and server communication. However, AJAX isn't just
                for ASP.NET. You can take advantage of the rich client framework to easily build
                client-centric web applications that integrate with any backend data provider and
                run on most modern browsers.
            </p>
        </div>
    </div>
    <% Ajax.RegisterScript(new CollapsiblePanelExtender("Panel1")
       {
           CollapseControlID = "Panel2",
           ExpandControlID = "Panel2",
           Collapsed = true,
           TextLabelID = "Label1",
           ImageControlID = "Image1",
           ExpandedText = "(Hide Details...)",
           CollapsedText = "(Show Details...)",
           ExpandedImage = "/Content/Images/collapse_blue.jpg",
           CollapsedImage = "/Content/Images/expand_blue.jpg",
           SuppressPostBack = true,
       }); %>
    <div class="demobottom">
    </div>
    <div id="Description_HeaderPanel" style="cursor: pointer;">
        <div class="heading">
            <img id="Description_ToggleImage" src="/Content/images/collapse.jpg" alt="collapse" />
            CollapsiblePanel Description
        </div>
    </div>
    <div id="Description_ContentPanel" style="overflow: hidden;">
        <p>
            The CollapsiblePanel is a very flexible extender that allows you to easily add collapsible
            sections to your web page. This extender targets any ASP.NET Panel control. The
            page developer specifies which control(s) on the page should be the open/close controller
            for the panel, or the panel can be set to automatically expand and/or collapse when
            the mouse cursor moves in or out of it, respectively.
        </p>
        <br />
        <p>
            The panel is also post-back aware. On a client postback, it automatically remembers
            and restores its client state. This demonstrates the ability of these extenders
            to have some communication between the client and the server code. Click <a href="javascript:document.forms[0].submit()">
                here</a> to cause a postback.
        </p>
        <br />
        <p>
            The page developer can specify whether the panel should scroll when it does not
            expand to the full size of its contents, and can also specify whether the panel
            expands in the height or width dimensions.
        </p>
        <br />
        <p>
            Note: CollapsiblePanel assumes that the standard CSS box model is being used. Early
            versions of Internet Explorer <a href="http://msdn2.microsoft.com/en-us/library/ms535242.aspx">
                didn't support that model completely</a>, so please use the <strong style="white-space: nowrap">
                    !DOCTYPE</strong> declaration (as found at the top of this page and enabled
            by default for new ASP.NET pages) to specify that the page should be rendered in
            IE's standards-compliant mode.
        </p>
    </div>
    <% Ajax.RegisterScript(new CollapsiblePanelExtender("Description_ContentPanel")
       {
           ExpandControlID = "Description_HeaderPanel",
           CollapseControlID = "Description_HeaderPanel",
           Collapsed = false,
           ImageControlID = "Description_ToggleImage",
           ExpandedImage = "/Content/Images/collapse.jpg",
           CollapsedImage = "/Content/Images/expand.jpg",

       }); %>
    <div id="Properties_HeaderPanel" style="cursor: pointer;">
        <div class="heading">
            <img id="Properties_ToggleImage" src="/Content/images/expand.jpg" alt="collapse" />
            CollapsiblePanel Properties
        </div>
    </div>
    <div id="Properties_ContentPanel" style="overflow: hidden; height: 0px">
        <p>
            The control above is initialized with this code. The <em>italic</em> properties
            are optional:
        </p>
        <pre>Ajax.RegisterScript(new CollapsiblePanelExtender("Panel1") { 
    <em>CollapsedSize</em> = 0
    <em>ExpandedSize</em> = 300
    <em>Collapsed</em> = true
    <em>ExpandControlID</em> = "LinkButton1"
    <em>CollapseControlID</em> = "LinkButton1"
    <em>AutoCollapse</em> = false
    <em>AutoExpand</em> = false
    <em>ScrollContents</em> = true
    <em>TextLabelID</em> = "Label1"
    <em>CollapsedText</em> = "Show Details..."
    <em>ExpandedText</em> = "Hide Details" 
    <em>ImageControlID</em> = "Image1"
    <em>ExpandedImage</em> = "/Content/Images/collapse.jpg"
    <em>CollapsedImage</em> = "/Content/Images/expand.jpg"
    <em>ExpandDirection</em> = CollapsiblePanelExpandDirection.Vertical });
        </pre>
        <ul>
            <li><strong>Constructor parameter</strong> - the Panel to operate expand and collapse.</li>
            <li><strong>CollapsedSize</strong> - The size of the target, in pixels, when it is in
                the collapsed state.</li>
            <li><strong>ExpandedSize</strong> - The size of the target, in pixels, when it is in
                the opened state.</li>
            <li><strong>Collapsed</strong> - Specifies that the object should initially be collapsed
                or expanded. Set this to match your initial size. In this case, we initially set
                the panel to a height of 0 to match the CollapsedSize property, so when the page
                first renders, we don't see the panel expanded.</li>
            <li><strong>AutoCollapse</strong> - True to automatically collapse when the mouse is
                moved off the panel.</li>
            <li><strong>AutoExpand</strong> - True to automatically expand when the mouse is moved
                over the panel.</li>
            <li><strong>ScrollContents</strong> - True to add a scrollbar if the contents are larger
                than the panel itself. False to just clip the contents.</li>
            <li><strong>ExpandControlID/CollapseControlID</strong> - The controls that will expand
                or collapse the panel on a click, respectively. If these values are the same, the
                panel will automatically toggle its state on each click.</li>
            <li><strong>TextLabelID</strong> - The ID of a label control where the "status text"
                for the panel will be placed. The panel will replace the internal HTML of this control
                (e.g. any HTML between the tags).</li>
            <li><strong>CollapsedText</strong> - The text to show in the control specified by TextLabelID
                when the panel is collapsed. This text is also used as the alternate text of the
                image if ImageControlID is set.</li>
            <li><strong>ExpandedText</strong> - The text to show in the control specified by TextLabelID
                when the panel is opened. This text is also used as the alternate text of the image
                if ImageControlID is set.</li>
            <li><strong>ImageControlID</strong> - The ID of an Image control where an icon indicating
                the collapsed status of the panel will be placed. The extender will replace the
                source of this Image with the CollapsedImage and ExpandedImage urls as appropriate.
                If the ExpandedText or CollapsedText properties are set, they are used as the alternate
                text for the image.</li>
            <li><strong>CollapsedImage</strong> - The path to an image used by ImageControlID when
                the panel is collapsed</li>
            <li><strong>ExpandedImage</strong> - The path to an image used by ImageControlID when
                the panel is expanded</li>
            <li><strong>ExpandDirection</strong> - can be "Vertical" or "Horizontal" to determine
                whether the panel expands top-to-bottom or left-to-right.</li>
        </ul>
    </div>
    <% Ajax.RegisterScript(new CollapsiblePanelExtender("Properties_ContentPanel")
       {
           ExpandControlID = "Properties_HeaderPanel",
           CollapseControlID = "Properties_HeaderPanel",
           Collapsed = true,
           ImageControlID = "Properties_ToggleImage",
           ExpandedImage = "/Content/Images/collapse.jpg",
           CollapsedImage = "/Content/Images/expand.jpg",
       }); %>
    <% Html.EndForm(); %>
</asp:Content>
